let vue = new Vue({
    el: "#app",
    created() {
        this.pageHandler(1);
    },

    data: {
        employeeList: [],
        currentPage: 1, //显示的是哪一页
        pageSize: 3, //每一页显示的数据条数
        total: 0, //记录总数
        maxPage: 4, //最大页数
        employee: {},
        file: {},
        imageURL: "./images/user2-160x160.jpg",
    },

    methods: {
        //查询所有
        findAll() {
            axios.get(`employee/${this.currentPage}/${this.pageSize}`).then(response => {
                console.log(response);
                let {data, total} = response.data;
                this.employeeList = data;
                this.total = total;

                if (data == undefined || data.length == 0) {
                    if (this.currentPage > 1) {
                        this.currentPage--;
                        this.findAll();
                    }
                }

            })
        },
        //pageHandler方法 跳转到page页
        pageHandler(page) {
            //here you can do custom state update
            this.currentPage = page;
            this.findAll();
        },

        //数据回显
        show(item) {
            axios.get(`employee/${item.employeeId}`).then(response => {
                let {data} = response.data;
                this.employee = data;
                this.imageURL = data.employeeImg;
            })
        },

        // part方式文件上传
        upload(e) {
            let formData = new FormData();
            formData.append("avater", e.target.files[0]);
            axios.post(`upload`, formData, {headers: {'Content-type': "multipart/form-data"}}).then(response => {
                let {data} = response.data;
                this.imageURL = data;
                this.employee.employeeImg = this.imageURL;

            })
        },
        //base64文件上传
        // upload(e) {
        //     let file = e.target.files[0];
        //     let reader = new FileReader();
        //     reader.readAsDataURL(file);
        //     reader.onload = (e) => {
        //         let imgCode = e.target.result;
        //         this.imageURL = imgCode;
        //         let baseStr = {};
        //         baseStr.str = imgCode;
        //         baseStr.fileName = file.name;
        //         axios.post(`upload`, baseStr, response => {
        //             console.log(response);
        //             let {status, data} = response.data;
        //             if (status == 200) {
        //                 console.log(data);
        //                 this.imageURL = data;
        //                 this.employee.employeeImg = this.imageURL;
        //             }
        //         })
        //     };
        // },

        add() {
            this.employee = {};
            this.imageURL = "./images/user2-160x160.jpg"
        },

        //添加
        addOrUpdate() {
            if (this.employee.employeeId) {
                this.editEmployee();
            } else {
                this.addEmployee();
            }
        },

        addEmployee() {
            axios.post(`employee`, this.employee).then(response => {
                    alert(response.data.message);
                    this.findAll();
            })
        },
        editEmployee() {
            axios.put(`employee`, this.employee).then(response => {
                    alert(response.data.message);
                    this.findAll();
            })
        },
        // deleteBtn(item) {
        //     this.employee = item
        // },
        deleteEmployee() {
            axios.delete(`employee/${this.employee.employeeId}`).then(response => {
                    alert(response.data.message);
                    this.findAll();
            })
        },
        getForm(e) {
            this.file = e.target.files[0];
        },

        importElsx() {
            let formData = new FormData();
            formData.append("form", this.file);
            console.log(formData);
            axios.post(`employee/import`, formData, {headers: {'Content-type': "multipart/form-data"}}).then(response => {
                let {message} = response.data;
                    alert(message);
                    findAll();
            })

        }

    }


});